<template>
  <div class="flex flex-wrap">
    <div v-for="(item, index) in sku_info" :key="item.key">
      <VGroup class="mb-[8px]">
        <el-input
          v-model="item.sku"
          placeholder="请输入SKU"
          @change="handleSku"
        />
        <el-input-number
          v-model="item.quantity"
          placeholder="请输入数量"
          :controls="false"
          :min="1"
          :step="1"
          step-strictly
          @change="handleSku"
        />
        <!-- <span
          class="hover:text-[#2080f0] cursor-pointer iconfont icon-add"
          @click="handleAdd(item, index)"
        ></span> -->
         <span
            class="hover:text-[#2080f0] cursor-pointer  mx-[8px]"
            @click="handleAdd(item, index)"
            ><SvgIcon icon-class="Plus" class="text-[12px] inline"/>
          </span>
                 <span
            class="hover:text-[#2080f0] cursor-pointer ml-[4px]"
            @click="handleDelete(item, index)"
           v-if="sku_info?.length > 1"
            ><SvgIcon icon-class="Minus" class="text-[12px] inline"/>
          </span>
        <!-- <span
          class="hover:text-[#2080f0] cursor-pointer iconfont icon-jian"
          @click="handleDelete(item, index)"
          v-if="sku_info?.length > 1"
        ></span> -->
      </VGroup>
    </div>
  </div>
</template>
<script setup>
import SvgIcon from "@/components/SvgIcon/index.vue";
import { getSkuDetails } from "@/api/crossSys.js";
import { objectToArray } from "../../../hooks/index";
const props = defineProps({
  value: { type: Object, default: () => {} },
});
watch(
  () => props.value,
  (val) => {
    console.log(val);
    if (!val) {
      emit("input", {
        sku: "",
        quantity: 1,
        key: +new Date(),
      });
      sku_info.value= [{ sku: "", quantity: 1, key: +new Date() }];
    }
  }
);
const emit = defineEmits(["input", "change"]);
const sku_info = ref([{ sku: "", quantity: 1, key: +new Date() }]);
const handleAdd = (item, index) => {
  sku_info.value.splice(index + 1, 0, {
    sku: "",
    quantity: 1,
    key: +new Date(),
  });
};
const handleDelete = (item, index) => {
  sku_info.value.splice(index, 1);
  handleSku();
};
const volumePackage = ref({
  volume: [],
  package_weight: 0,
});
const handleSku = async () => {
  let results = [];
  for (const item of sku_info.value) {
    if (!item.sku) {
      continue; // 跳过没有 SKU 的项
    }
    try {
      const { data, code, message } = await getSkuDetails({ sku: item.sku });
      if (code !== 200) continue;
      let _volume = objectToArray(data?.packing_size_cm || {});
      let package_weight =
        (data?.packing_weight_g && Number(data?.packing_weight_g / 1000)) ||
        null;
      results.push({
        volume: _volume,
        package_weight,
        quantity: item.quantity,
      });
    } catch (error) {}
  }
  let totalWeight = 0;
  let maxLength = 0;
  let maxWidth = 0;
  let totalHeight = 0;

  results?.forEach((item) => {
    // 计算总重量
    const weight = item.package_weight
      ? item.package_weight * item.quantity
      : 0;
    totalWeight += weight;

    // 计算最大长度和最大宽度
    const [length, width, height] = item.volume;
    if (length > maxLength) maxLength = length;
    if (width > maxWidth) maxWidth = width;

    // 计算总高度
    totalHeight += height * item.quantity;
  });
  volumePackage.value = {
    volume: [maxLength, maxWidth, totalHeight],
    package_weight: totalWeight,
  };
  emit("input", sku_info.value);
  emit("change", volumePackage.value);
};
const blurSku = () => {
  let formValues = form.value.getFormValues();
  if (formValues.customer_order_no) {
    model.value = Object.assign({}, formValues, {
      sku: null,
    });
    return ElMessage.warning("输入订单号不能输入SKU!");
  }
};
</script>
